<template>
  <div class="zhoushipu">
    <ul class="zhoushipuleft">
      <li
        v-for="(item,index) in arr"
        :key="index"
        :class="active===index+1?'yan':''"
        @click="zhuan(index)"
      >{{item.name}}</li>
    </ul>
    <ul class="zhoushipuright">
      <li v-for="(item,index) in this.$store.state.zhouji" :key="index">
        <div class="zhoushipurightleft">
          <img :src="item.src" @click="xiang(item.id)"/>
        </div>
        <div class="zhoushipurightright">
          <h1>{{item.canyang}}</h1>
          <p>单商品起送:{{item.qisong}}份 剩余{{item.shenyu}}份</p>
          <div>
            <h1 class="price">￥{{item.price}}.00</h1>
            <span>+</span>
          </div>
        </div>
      </li>
    </ul>
    <XIANG v-if="this.flag" @tuichus="tuichua"/>
  </div>
</template>

<script>
import XIANG from "../xiang/index.vue"

export default {
  name: "shipu",
  components:{
    XIANG
  },
  data() {
    return {
      arr: [
        {
          name: "周一食谱"
        },
        {
          name: "周二食谱"
        },
        {
          name: "周三食谱"
        },
        {
          name: "周四食谱"
        },
        {
          name: "周五食谱"
        },
        {
          name: "周六食谱"
        },
        {
          name: "周日食谱"
        }
      ],
      active: 1,
      flag:false
    };
  },
  methods: {
    zhuan(index) {
      this.active = index + 1;
      this.$store.commit("canpusa", index+1);
    },
    xiang(id){
        this.flag=true
        this.$store.commit("xiangs", id);
    },
    tuichua(){
        this.flag=false
    }
  },
  created() {
    this.$store.commit("canpus", 1);
  }
};
</script>

<style scoped>
.zhoushipu {
  width: 100%;
  height: 280px;
  background: #fff;
  display: flex;
  justify-content: space-between;
}
.zhoushipuleft {
  width: 20%;
  height: 100%;
  background: rgba(224, 243, 254);
}
.zhoushipuleft li {
  width: 100%;
  height: 40px;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
}
.zhoushipuleft .yan {
  background: #fff;
}
.zhoushipuright {
  width: 78%;
  height: 100%;
  overflow-y: auto;
}
.zhoushipuright li {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.zhoushipurightleft {
  width: 25%;
  height: 100%;
}
.zhoushipurightleft img {
  width: 100%;
  height: 85%;
}
.zhoushipurightright {
  width: 73%;
  height: 100%;
}
.zhoushipurightright h1 {
  font-size: 14px;
}
.zhoushipurightright p {
  font-size: 14px;
}
.zhoushipurightright .price {
  color: red;
}
.zhoushipurightright div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zhoushipurightright div span{
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: red;
  color: #fff;
  line-height: 26px;
  text-align: center;
}
</style>